<template>
    <div>
        订单时间&ensp;
        <a-space direction="vertical" :size="12">
            <a-range-picker v-model:value="value1" :ranges="ranges" style="width: 250px" />
        </a-space>&emsp;&ensp;
        订单类型&emsp;&ensp;
        <a-select v-model:value="selectedItems" mode="multiple" placeholder="全部"
            style="width: 200px"></a-select>&emsp;&ensp;
        <a-input-search v-model:value="value" style="width: 360px" placeholder="输入订单编号/患者姓名" enter-button
            @search="onSearch" />
    </div>
</template>

<script lang="ts">
import dayjs, { Dayjs } from 'dayjs';
type RangeValue = [Dayjs, Dayjs];
import { defineComponent, ref, computed } from 'vue'
const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
export default defineComponent({
    emits :{
        'searchfun':null, //自定义事件名 后面 :null 表示不进行验证
     },
    setup(props, ctx) {
        const selectedItems = ref([]);
        const value = ref('');
        //@ts-ignore
        const onSearch = searchValue => {
            // console.log('use value', searchValue);
            // console.log('or use this.value', value.value);
            ctx.emit('searchfun', searchValue)
        };
        return {
            onSearch,
            value,
            selectedItems,
            value1: ref<RangeValue>(),
            ranges: {
                Today: [dayjs(), dayjs()] as RangeValue,
                'This Month': [dayjs(), dayjs().endOf('month')] as RangeValue,
            },
        }
    }
})
</script>

<style scoped></style>